<template>
    <div class="container">
        <!-- 这是 广告签约管理 签约金结算页面 (未结算) -->

        <!-- 车主基本信息 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名：" style="text-align: left;text-indent: 20px;">
                {{ formInline.user }}
            </el-form-item>
            <el-form-item label="联系电话：">
                {{ formInline.phone }}
            </el-form-item>
            <el-form-item label="身份证号码：">
                {{ formInline.IDcard }}
            </el-form-item>
        </el-form>

        <!-- 车主身份证信息 -->
        <div class="IDcard">
            <div style="text-align: left;text-indent: 20px"><span>身份信息：</span></div>
            <div class="IDcard-IMG">
                <img src="../../assets/WXS/IDcardZ.png" alt="" width="300px" height="170px">
                <img src="../../assets/WXS/IDcardF.png" alt="" width="300px" height="170px">
                <img src="../../assets/WXS/IDcardF.png" alt="" width="300px" height="170px" style="opacity: 0">
            </div>
        </div>

        <!-- 车辆信息 -->
        <div class="IDcard">
            <div class="IDcard-text"><span>车辆信息：</span></div>
            <div class="IDcard-car">
                <div class="IDcard-content-car">
                    <p><span>车辆类型：商务车</span></p>
                    <div>
                        <p><span>行驶证照片</span></p>
                    </div>
                </div>
                <div class="IDcard-content-car">
                    <p><span>车辆类型：商务车</span></p>
                    <div>
                        <p><span>行驶证照片</span></p>
                    </div>
                </div>
                <div class="IDcard-content-car">
                    <p><span>车辆类型：商务车</span></p>
                    <div>
                        <p><span>行驶证照片</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!--  -->
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                user: '王兴盛',
                phone: '12345678911',
                IDcard: '622827123020581328'
            }
        }
    }
}
</script>

<style scoped>
.container {
    border: 1px solid #d8d8d8;
}

.el-form {
    width: 100%;
    height: 60px;
    /* line-height: 60px; */
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
}

.el-form-item {
    margin-top: 12px;
    width: 350px;
}

.IDcard-text {
    width: 100%;
    text-align: left;
    text-indent: 20px;
    margin-top: 20px;
}

.IDcard-IMG {
    width: 92%;
    margin-left: 50px;
    text-align: left;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.IDcard-IMG img {
    box-shadow: 1px 1px 2px 2px #d8d8d8;
}

.IDcard-car {
    width: 92%;
    margin-left: 50px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.IDcard-content-car{
    width: 300px;
    height: 170px;
    background: aqua;
    box-shadow: 1px 1px 2px 2px #d8d8d8;
}
</style>